<template>
  <div>
    <h2>机构认证基本信息</h2>
    <el-form label-position="top">
      <h4>实名信息</h4>
      <el-form-item label="昵称">
        <span>
          {{ info.nickname }}
        </span>
      </el-form-item>
      <el-form-item label="用户ID">
        <span>{{ info.uid }}</span>
      </el-form-item>
      <el-form-item label="实名认证情况">
        <span>{{ ['未认证', '已提交', '已认证', '未通过'][info.realIdentified] }}</span>
      </el-form-item>
      <el-form-item label="认证方式">
        <span>{{ realnameInfo.id == null ? '支付宝快捷认证' : '人工认证' }}</span>
      </el-form-item>
      <el-form-item label="真实姓名">
        <span>{{ realnameInfo.username }}</span>
      </el-form-item>
      <el-form-item label="证件类型">
        <span>{{ $selectFormat['cardType'](realnameInfo.cardType).label }}</span>
      </el-form-item>
      <el-form-item label="证件号码">
        <span>
          {{ realnameInfo.idcard }}
        </span>
      </el-form-item>
      <el-form-item label="证件原件照片">
        <div class="imgBox">
          <div class="picture" v-for="(item, index) in realnameInfo.attachments" :key="index">
            <img :src="item" :preview="index" />
          </div>
        </div>
      </el-form-item>

      <h4>认证信息</h4>
      <el-form-item label="认证机构">
        <span>
          {{ info.name }}
        </span>
      </el-form-item>
      <el-form-item label="机构行业">
        <span>{{ info.industry }}</span>
      </el-form-item>
      <el-form-item label="认证说明">{{ info.showName }}</el-form-item>
      <el-form-item label="社会统一认证代码">
        <span>{{ info.code }}</span>
      </el-form-item>
      <el-form-item label="法人姓名">
        <span>{{ info.legalName }}</span>
      </el-form-item>
      <el-form-item label="办公地点">
        <span>
          {{ address }}
        </span>
      </el-form-item>
      <el-form-item label="项目经验">
        <textarea rows="4" cols="100" v-model="info.experience"></textarea>
      </el-form-item>
      <el-form-item label="机构业务介绍">
        <textarea rows="4" cols="100" v-model="info.ability"></textarea>
      </el-form-item>
      <el-form-item label="营业执照">
        <div class="imgBox">
          <div class="picture" v-for="(item, index) in info.attachments" :key="index">
            <img :src="item" :preview="index" />
          </div>
        </div>
      </el-form-item>

      <h2>机构认证审核</h2>
      <el-form-item label="审核设置">
        <el-radio-group v-model="info.checked" class="set">
          <el-radio :label="1">审核通过</el-radio>
          <el-radio :label="2">
            审核不通过
            <el-input
              v-model="info.remark"
              v-if="(showReason = true)"
              placeholder="填写审核不通过原因"
            ></el-input>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <edit-bar>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="$tabs.close()">取消</el-button>
      </edit-bar>
    </el-form>
  </div>
</template>
<script>
  import EditBar from 'comp/EditBar';
  export default {
    data() {
      return {
        checked: 0,
        reason: '',
        info: [],
        realnameInfo: {},
        address: '',
      };
    },
    components: {
      EditBar,
    },
    mounted() {
      this.getInfo();
    },
    methods: {
      getInfo() {
        this.$service.IdentificationOrganDetail({ uuid: this.$route.params.uid }).then((res) => {
          this.info = { ...res };
          this.address =
            this.info.province == this.info.city
              ? this.info.province
              : this.info.province + this.info.city;
          this.realnameInfo = this.info.realnameInfo;
          this.$previewRefresh();
        });
      },
      pass() {
        this.$service
          .IdentificationPass({ kind: 'organ', uuid: this.$route.params.uid })
          .then((res) => {
            this.$message.success('审核通过');
          })
          .catch((res) => {
            this.$message.error(res.message);
          });
      },
      noPass() {
        this.$service
          .IdentificationRefuse({
            kind: 'organ',
            uuid: this.$route.params.uid,
            remark: this.info.remark,
          })
          .then((res) => {
            this.dialogShow = false;
            this.$message.success('操作成功');
          });
      },
      save() {
        if (this.info.checked == 1) {
          this.pass();
        }
        if (this.info.checked == 2) {
          if (this.info.remark == '') {
            this.$message.warning('请输入审核不通过原因');
            return;
          }
          this.noPass();
        }
      },
    },
  };
</script>
<style lang="less" scoped>
  /deep/ .el-form-item__label {
    font-size: 16px;
    padding: 10px 5px !important;
    margin-bottom: 10px;
    border-radius: 3px 3px 0 0;
    background: #ced6e2;
    color: #222;
    width: 100%;
    line-height: 24px;
  }
  .edit-bar {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
    left: 210px;
    background: white;
    padding: 20px;
    border-top: 1px solid #ccc;
    z-index: 11;

    /deep/ .el-button {
      margin-left: 10px;
    }
  }
  .set {
    margin-bottom: 40px;
  }
  .imgBox {
    display: flex;
    flex-wrap: wrap;
  }
  .picture {
    margin-right: 15px;
    margin-bottom: 10px;
    height: 150px;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
</style>
